<template>
  <CjuiEchart :loading="false" :noData="false" :options="chartOption" class="h-490px" />
</template>

<script lang="ts" setup>
import { useThemeColorVars } from '@/components/cjui/Echart/index'
import { symbolPlanePath, symbolFlagPath } from '@/components/cjui/Echart/index'

const { colorVars } = useThemeColorVars()

const chartOption = {
  geo: [
    // 地图层
    {
      map: 'china',
      zlevel: 1,
      z: 3,
    },
    // 纯色层
    {
      map: 'china',
      center: [105.37, 36.3],
      zlevel: 1,
      z: 2,
      itemStyle: {
        areaColor: colorVars.value.mapAreaSoildColor,
        borderColor: colorVars.value.mapAreaSoildColor,
      },
      regions: [
        {
          name: '南海诸岛',
          itemStyle: {
            opacity: 0
          }
        }
      ]
    },
    // 阴影层
    {
      map: 'china',
      center: [105.37, 36.3],
      zlevel: 1,
      z: 1,
      itemStyle: {
        shadowColor: colorVars.value.mapAreaSoildShadow,
        shadowBlur: 4,
        shadowOffsetX: 4,
        shadowOffsetY: 4
      },
      regions: [
        {
          name: '南海诸岛',
          itemStyle: {
            opacity: 0
          }
        }
      ]
    }
  ],
  series: [
    // 飞行图配置
    {
      name: '地图数据项1',
      type: 'lines',
      coordinateSystem: 'geo',
      zlevel: 2,
      effect: {
        symbol: symbolPlanePath,
        symbolSize: 20
      },
      data: [
        {
          coords: [
            [105.97, 35.71],
            [115.97, 45.71]
          ]
        }
      ],
    }, 
    {
      name: '地图数据项2',
      type: 'scatter',
      coordinateSystem: 'geo',
      zlevel: 3,
      symbol: symbolFlagPath,
      symbolSize: 20,
      data: [
        { name: '北京', value: [105.97, 35.71] },
        { name: '上海', value: [115.97, 45.71], itemStyle: { color: colorVars.value.red } },
      ],
    },
  ],
}
</script>
